@charset 'UTF-8';
$device-width: 750;
$device-dpr: 2;
$blocks: 7.5;
$min-device-width: 320px;
$max-device-width: 540px;

// 定义html的font-size
@mixin root-font-size () {
  font-size: calc(100vw / $blocks);
}

  // 最小宽度定义
@media screen and (max-width: $min-device-width) {
  html {
    font-size: 64px;
  }
  body {
    min-width: 320px;
  }
}
// 最大宽度定义

@media screen and (min-width: $max-device-width) {
  html {
    font-size: 108px;
  }
  body {
    min-width: 540px;
  }
  }

// 单位px转化为rem
@function px2rem($px) {
  // @return $px / $device-width * $blocks * 1rem;
  @return $px / 50 * 1rem; // 375
}



/**
 * 实现固定宽高比
 * @param  {string} $position: relative      定位方式
 * @param  {string} $width:    100%          容器宽度
 * @param  {string} $sub:      null          容器的目标子元素
 * @param  {number} $aspectX:  1             容器宽
 * @param  {number} $aspectY:  1             容器高
 */
 @mixin aspect-ratio (
    $position: relative,
    $width: 100%,
    $sub: null,
    $aspectX: 1,
    $aspectY: 1
) {
    overflow: hidden;
    position: $position;
    padding-top: percentage($aspectY / $aspectX);
    width: $width;
    height: 0;

    @if $sub == null {
        $sub: "*";
    }

    & > #{$sub} {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

// 实现1物理像素单边框线
@mixin border-single ( 
  $direction: bottom, 
  $size: 1px,
  $color: #ddd, 
  $position: relative
) {
  position: $position;
  &:after {
    content: '';
    position: absolute;
    #{$direction}: 0;
    pointer-events: none;
    background-color: $color;

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
    }
  }
  /* 上下 */
  @if ($direction == top or $direction == bottom) {
    left: 0;
    width: 100%;
    height: $size;

    @media only screen and (-webkit-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
    }

    @media only screen and (-webkit-device-pixel-ratio: 3) {
        -webkit-transform: scaleY(.333333333333);
                transform: scaleY(.333333333333);
    }
}

  /* 左右 */
  @else if ($direction == left or $direction == right) {
      top: 0;
      width: $size;
      height: 100%;

      @media only screen and (-webkit-device-pixel-ratio: 2) {
          -webkit-transform: scaleX(.5);
                  transform: scaleX(.5);
      }

      @media only screen and (-webkit-device-pixel-ratio: 3) {
          -webkit-transform: scaleX(.333333333333);
                  transform: scaleX(.333333333333);
      }
  }
}